// path node中的核心模块
const path = require('path')
// __dirname:全局变量 指向当前目录的绝对地址
// path.join是拼接
// console.log(path.join(__dirname,'dist123'))
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// mini-css-extract-plugin插件帮助我们把css代码提取到一个独立的文件中（而不是以style的方式嵌在html文件中
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 对css进行压缩 去掉js代码中的console.log
// 这个时候需要把导出模式改为生产模式 不然无效
const TerserWebpackPlugin = require('terser-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 把我们自已写的.html文件复制到指定打包出口目录下，并引入相关的资源代码。在dist添加html不需要我们再去指定
// 为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题。
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// 每次打包都会删除上次打包的文件

// 导出一个配置
// mode entry output ......每一项都有自己的作用
// 学习webpack就是学习webpack.config.js中配置项的使用方式
// mode导出方式 有两种模式 不设置会有警告
module.exports = {
    // 配置 webpack-dev-server的选项 实时打包更新
    devServer: {
        host: '127.0.0.1',  // 配置启动ip地址
        port: 10088,  // 配置端口
        open: true  // 配置是否自动打开浏览器
    },
    // 其它配置
    mode: "production", // 生产模式 会启动wabpack内部的一些优化措施，例如压缩，加密，混淆..让代码不可读
    // mode: "development", // 开发模式 代码可读 体积很大
    // devtool: 'source-map', // dist中多了和.map文件 建立dist代码与源代码的对应关系 错误便于找到
    // devtool: 'inline-source-map', // 多出的map文件嵌入main.js中，映射关系保存在打包文件中
    // 如果代码要上线就不设置map
    entry: './src/js/main.js',
    // 入口文件 默认是./src/index.js 可以修改
    // 出口文件 output filename main.js
    output: {
       "path": path.join(__dirname,'dist'),
       "filename": "main.js"
    },
    optimization: {
        minimizer: [
            new OptimizeCssAssetsWebpackPlugin(),
            new TerserWebpackPlugin({
            parallel: 4,
            extractComments: true,
            terserOptions: {
                compress: {
                warnings: false,
                drop_console: true,
                drop_debugger: true
                }
            }
            })
        ]
    },
    module:{ // 处理非js模块
        rules:[ // 规则
            {
                test: /\.js$/, // 对js做浏览器兼容的降级处理
                exclude: /node_modules/,  // 排除目录
                use: [
                    {
                        loader:'babel-loader',
                        options: {
                          presets: ['@babel/preset-env'] // @babel/preset-env用来指定按什么样的预设来进行降级处理
                        }
                     }
                ]
              // es6转es5
            },
            {
                test: /\.css$/, 		// 正则测试
                // 匹配成功之后先用css-loader加载.css文件 再用style-loader把样式嵌入到标签中
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options:{publicPath: '../'},  
                  }, 'css-loader', 'postcss-loader'] 	// loader
                // 如果它是一个数组，则表示当匹配成功之后从右向左依次去使用loader。
                // css-loader： 允许你通过Import的方法引入css
                // style-loader: 可以把css以style标签的格式插入到html中
            },
            {
                test: /\.less$/, // 用正则匹配
                use:[{
                    loader: MiniCssExtractPlugin.loader,
                    options:{publicPath: '../'},  
                  },'css-loader', 'postcss-loader', 'less-loader'] // 如果匹配成功，就使用Loader
                // 如果它是一个数组，则表示当匹配成功之后从右向左依次去使用loader。
                // (1) less-loader: 把less加载，转成css
                // (2) css-loader： 允许你通过Import的方法引入css
                // (3) style-loader: 可以把css以style标签的格式插入到html中
                // 'postcss-loader 添加css样式前缀处理浏览器兼容器问题
                // 对于要支持的浏览器的设置，也可以写在package.json中// ......"browserslist": "ie 10"
            },
            {
                test:/\.woff$/,
                // 处理字体图标文件iconfont.woff
                use:{
                loader: 'file-loader',
                options: {
                    // [name]: 这里[]表示里面放一个占位符。name就是要处理的文件名
                    // [ext]:  这里[]表示里面放一个占位符。ext就是要处理的文件后缀名
                    name: '[name].[ext]',
                    // 打包为文件中
                    outputPath: './fonts'
                }
                }
            },
            {
                test: /\.(png|svg|gif|jpg)$/,
                // 处理：在项目中支持对图片的处理
                use: {
                loader: 'url-loader',
                options: {
                    limit: 3*1024, // 设置文件阈值 如果图片小于3k就转成base64,否则就直接拷贝
                    name: '[name].[ext]',
                    outputPath: './img'
                }
                } 
            }
        ]
    },
    plugins:[ // 提取css为一个整体
        new MiniCssExtractPlugin({
          filename:'css/[name].css'
        }),
        new HtmlWebpackPlugin({
            minify: { // 压缩HTML文件
              removeComments: true, // 移除HTML中的注释
              collapseWhitespace: true, // 删除空白符与换行符
              minifyCSS: true// 压缩内联css
            },
            filename: 'index.html',
            // path.resolve()就是转成绝对路径
            template: path.resolve('./src/index.html') // 指定模块的位置
        }),
        new CleanWebpackPlugin() // 在生成打包文件之前，把出口目录清空掉。
    ]
}
// 指定配置文件